<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>地址管理</p>
        </header>

        <!-- 地址列表部分 -->
        <ul class="addresslist">
            <li v-for="item in deliveryAddressArr">
                <div class="addresslist-left" @click="setDeliveryAddress(item)">
                    <h3>
                        {{ item.contactName
                        }}{{ this.sexFilter(item.contactSex) }}
                        {{ item.contactTel }}
                    </h3>
                    <p>{{ item.address }}</p>
                </div>
                <div class="addresslist-right">
                    <i
                        class="fa fa-edit"
                        @click="editUserAddress(item.daId)"
                    ></i>
                    <i
                        class="fa fa-remove"
                        @click="removeUserAddress(item.daId)"
                    ></i>
                </div>
            </li>
        </ul>

        <!-- 新增地址部分 -->
        <div class="addbtn" @click="toAddUserAddress">
            <i class="fa fa-plus-circle"></i>
            <p>新增收货地址</p>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from "../components/Footer.vue";

export default {
    name: "UserAddress",
    data() {
        return {
            businessId: this.$route.query.businessId,
            user: {},
            deliveryAddressArr: [],
            token: ''
        };
    },
    created() {
        this.user = this.$getSessionStorage("user");
        this.token = this.$getSessionStorage("token");
        this.listDeliveryAddressByUserId();
    },
    components: {
        Footer,
    },
    methods: {
        sexFilter(value) {
            return value == 1 ? "先生" : "女士";
        },
        listDeliveryAddressByUserId() {
            //查询送货地址
            this.token = this.$getSessionStorage("token");
            let url = `DeliveryAddressController/listDeliveryAddressByUserId/${this.user.userId}?token=${this.token}`;
            this.$axios
                .get(url)
                .then((response) => {
                    this.deliveryAddressArr = response.data.result;
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        setDeliveryAddress(deliveryAddress) {
            //把用户选择的默认送货地址存储到localStorage中
            this.$setLocalStorage(this.user.userId, deliveryAddress);
            if (this.businessId == null) {
                this.$router.push({
                    path: "/User",
                });
            } else {
                this.$router.push({
                    path: "/orders",
                    query: {
                        businessId: this.businessId,
                    },
                });
            }
        },
        toAddUserAddress() {
            this.$router.push({
                path: "/addUserAddress",
                query: {
                    businessId: this.businessId,
                },
            });
        },
        editUserAddress(daId) {
            this.$router.push({
                path: "/editUserAddress",
                query: {
                    businessId: this.businessId,
                    daId: daId,
                },
            });
        },
        removeUserAddress(daId) {
            if (!confirm("确认要删除此送货地址吗？")) {
                return;
            }
            this.token = this.$getSessionStorage("token");
            let url = `DeliveryAddressController/removeDeliveryAddress/${daId}?token=${this.token}`;
            this.$axios
                .delete(url)
                .then((response) => {
                    if (response.data.result > 0) {
                        let deliveryAddress = this.$getLocalStorage(
                            this.user.userId
                        );
                        if (
                            deliveryAddress != null &&
                            deliveryAddress.daId == daId
                        ) {
                            this.$removeLocalStorage(this.user.userId);
                        }
                        this.listDeliveryAddressByUserId();
                    } else {
                        alert("删除地址失败！");
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        },
    },
};
</script>

<style scoped>
/********** 总容器 **********/
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}

/********** header ***********/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #ffffff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    /*保证在最上层*/
    z-index: 1000;
}

/********** addresslist **********/
.wrapper .addresslist {
    width: 100%;
    margin-top: 12vw;
    background-color: #ffffff;
}

.wrapper .addresslist li {
    width: 100%;
    box-sizing: border-box;
    border-bottom: solid 1px #dddddd;
    padding: 3vw;

    display: flex;
}

.wrapper .addresslist li .addresslist-left {
    flex: 5;
    /*左边这块区域是可以点击的*/
    user-select: none;
    cursor: pointer;
}

.wrapper .addresslist li .addresslist-left h3 {
    font-size: 4.6vw;
    font-weight: 300;
    color: #666666;
}

.wrapper .addresslist li .addresslist-left p {
    font-size: 4vw;
    color: #666666;
}

.wrapper .addresslist li .addresslist-right {
    flex: 1;
    font-size: 5.6vw;
    color: #999999;
    cursor: pointer;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

/********** 新增地址部分 **********/
.wrapper .addbtn {
    width: 100%;
    height: 14vw;
    border-top: solid 1px #dddddd;
    border-bottom: solid 1px #dddddd;
    background-color: #ffffff;
    margin-top: 4vw;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 4.5vw;
    color: #0097ff;
    user-select: none;
    cursor: pointer;
}

.wrapper .addbtn p {
    margin-left: 2vw;
}
</style>
